<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<%@taglib uri="/struts-tags" prefix="s" %>
<html lang="en">
    <head>
		<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <title>Animated Content Tabs with CSS3</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="Animated Content Tabs with CSS3" />
        <meta name="keywords" content="tabs, css3, transition, checked, pseudo-class, label, css-only, sibling combinator" />
        <meta name="author" content="Codrops" />
       <link type="text/css" href="css/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
        <script type="text/javascript" src="scripts/jquery-1.5.1.min.js"></script>
		<script type="text/javascript" src="scripts/jquery-ui-1.8.13.custom.min.js"></script>
		
		<!--[if lt IE 9]>
			<style>
				.content{
					height: auto;
					margin: 0;
				}
				.content div {
					position: relative;
				}
			</style>
		<![endif]-->
		
		
		<script type="text/javascript">
		$(function(){
			// Tabs
			$('#tabs').tabs();
			});
			
			jQuery(document).ready(function() {
				
				
				
				
				$('#tabtaba2').click(function() {
					
					$('#tabs-2').attr("src","BookedConferences.action");
					
				});
                   $('#tabtaba3').click(function() {
					
					$('#tabs-3').attr("src","AlreadyBookedConferences.action");
					
				});
				
				
				
			});
		</script>
	
    </head>
    <body>
  	
		         <div style="width:1300px;height:320px; font-size:small;">
			            <div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
		        <ul>
					<li id="tabtab1"><a href="#firstFrame">DashBoard</a></li>
					<li id="tabtab2"><a id="tabtaba2" href="#tabs-2">Register Conferences</a></li>
					<li id="tabtab3" ><a id="tabtaba3" href="#tabs-3">Booked Conferences</a></li>
				</ul>
					<iframe id="firstFrame" width=100% height=100% >
			          <p>Tab 1 content</p>
			       </iframe>
			       <iframe id="tabs-2" width=100% height=100% src="BookedConferences.action">
			          <p>Tab 2 content</p>
			       </iframe> 
			       <iframe id="tabs-3" width=100% height=100% src="AlreadyBookedConferences.action">
			          <p>Tab 2 content</p>
			       </iframe>
			       </div>
			       </div>	
			       
			
       
    </body>
</html>